﻿<template>
  <div class="reports-center">
    <el-card>
      <template #header>
        <div class="card-header">
          <span class="title">馃搳 综合报表中心</span>
          <el-button type="primary" @click="handleCustomReport">
            <el-icon><Setting /></el-icon>
            自定义报表
          </el-button>
        </div>
      </template>

      <el-row :gutter="20" class="quick-stats">
        <el-col :span="6">
          <div class="stat-card sales">
            <div class="stat-icon">
              <el-icon :size="40"><TrendCharts /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-label">今日销售</div>
              <div class="stat-value">楼{{ todaySales.toLocaleString() }}</div>
              <div class="stat-trend up">
                <el-icon><CaretTop /></el-icon>
                <span>{{ salesGrowth }}%</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card orders">
            <div class="stat-icon">
              <el-icon :size="40"><Document /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-label">今日订单数</div>
              <div class="stat-value">{{ todayOrders }}</div>
              <div class="stat-trend up">
                <el-icon><CaretTop /></el-icon>
                <span>{{ ordersGrowth }}%</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card members">
            <div class="stat-icon">
              <el-icon :size="40"><UserFilled /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-label">今日新增会员</div>
              <div class="stat-value">{{ todayMembers }}</div>
              <div class="stat-trend up">
                <el-icon><CaretTop /></el-icon>
                <span>{{ membersGrowth }}%</span>
              </div>
            </div>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="stat-card inventory">
            <div class="stat-icon">
              <el-icon><Box /></el-icon>
            </div>
            <div class="stat-content">
              <div class="stat-label">库存预警</div>
              <div class="stat-value warning">{{ inventoryWarning }}</div>
              <div class="stat-trend">
                <el-button link type="danger" size="small">查看详情</el-button>
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      <el-row :gutter="20" style="margin-top: 30px;">
        <el-col :span="6" v-for="category in reportCategories" :key="category.id">
          <el-card class="report-category-card" shadow="hover" @click="handleCategoryClick(category)">
            <div class="category-icon" :style="{ background: category.color }">
              <el-icon :size="48">
                <component :is="category.icon" />
              </el-icon>
            </div>
            <div class="category-info">
              <h3>{{ category.name }}</h3>
              <p>{{ category.description }}</p>
              <div class="category-stats">
                <el-tag size="small">{{ category.reportCount }} 个报表</el-tag>
              </div>
            </div>
          </el-card>
        </el-col>
      </el-row>

      <el-card style="margin-top: 30px;">
        <template #header>
          <div class="section-header">
            <span>猸?常用报表</span>
            <el-button link type="primary">查看全部</el-button>
          </div>
        </template>
        <el-row :gutter="20">
          <el-col :span="6" v-for="report in frequentReports" :key="report.id">
            <div class="report-item" @click="handleReportClick(report)">
              <div class="report-icon">
                <el-icon :size="32" :color="report.color">
                  <component :is="report.icon" />
                </el-icon>
              </div>
              <div class="report-name">{{ report.name }}</div>
              <div class="report-meta">
                <span>{{ report.views }} 次查看</span>
              </div>
            </div>
          </el-col>
        </el-row>
      </el-card>

      <el-card style="margin-top: 20px;">
        <template #header>
          <span>馃晲 最近查看</span>
        </template>
        <el-table :data="recentReports" :show-header="false">
          <el-table-column prop="name" label="报表名称">
            <template #default="{ row }">
              <div class="recent-report-item">
                <el-icon :size="24" :color="row.color" style="margin-right: 10px;">
                  <component :is="row.icon" />
                </el-icon>
                <span>{{ row.name }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="category" label="分类" width="120">
            <template #default="{ row }">
              <el-tag size="small">{{ row.category }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="viewTime" label="查看时间" width="180" />
          <el-table-column label="操作" width="150">
            <template #default="{ row }">
              <el-button link type="primary" @click="handleReportClick(row)">查看</el-button>
              <el-button link type="success" @click="handleExport(row)">导出</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </el-card>
  </div>
</template>

<script setup>
import { ref, markRaw } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Setting, TrendCharts, Document, UserFilled, Box, CaretTop,
  ShoppingCart, Goods, Money, Van, DataBoard, DataAnalysis
} from '@element-plus/icons-vue'

const router = useRouter()

// 快速统计
const todaySales = ref(567890)
const salesGrowth = ref(12.5)
const todayOrders = ref(1234)
const ordersGrowth = ref(8.3)
const todayMembers = ref(234)
const membersGrowth = ref(15.6)
const inventoryWarning = ref(23)

// 报表分类
const reportCategories = ref([
  {
    id: 1,
    name: '销售报表',
    description: '销售数据统计与分析',
    icon: markRaw(ShoppingCart),
    color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
    reportCount: 12,
    path: '/reports/sales'
  },
  {
    id: 2,
    name: '库存报表',
    description: '库存数据监控与预警',
    icon: markRaw(Goods),
    color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
    reportCount: 8,
    path: '/reports/inventory'
  },
  {
    id: 3,
    name: '财务报表',
    description: '财务收支与利润分析',
    icon: markRaw(Money),
    color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
    reportCount: 15,
    path: '/reports/finance'
  },
  {
    id: 4,
    name: '采购报表',
    description: '采购数据统计与分析',
    icon: markRaw(Van),
    color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
    reportCount: 10,
    path: '/reports/purchase'
  },
  {
    id: 5,
    name: '会员报表',
    description: '会员数据分析与运营',
    icon: markRaw(UserFilled),
    color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)',
    reportCount: 7,
    path: '/member/reports'
  },
  {
    id: 6,
    name: '数据分析',
    description: '综合数据对比分析',
    icon: markRaw(DataAnalysis),
    color: 'linear-gradient(135deg, #30cfd0 0%, #330867 100%)',
    reportCount: 6,
    path: '/reports/analysis'
  }
])

// 常用报表
const frequentReports = ref([
  { id: 1, name: '日销售汇总', icon: markRaw(TrendCharts), color: '#667eea', views: 1234, path: '/reports/sales/daily' },
  { id: 2, name: '月销售报表', icon: markRaw(DataBoard), color: '#f5576c', views: 987, path: '/reports/sales/monthly' },
  { id: 3, name: '库存预警', icon: markRaw(Box), color: '#4facfe', views: 856, path: '/reports/inventory/warning' },
  { id: 4, name: '会员消费分析', icon: markRaw(UserFilled), color: '#43e97b', views: 745, path: '/member/reports' }
])

// 最近查看
const recentReports = ref([
  { id: 1, name: '月度销售分析报表', category: '销售报表', viewTime: '2024-01-20 14:30', icon: markRaw(TrendCharts), color: '#667eea' },
  { id: 2, name: '会员消费排行榜', category: '会员报表', viewTime: '2024-01-20 10:15', icon: markRaw(UserFilled), color: '#f5576c' },
  { id: 3, name: '库存周转率分析', category: '库存报表', viewTime: '2024-01-19 16:45', icon: markRaw(Goods), color: '#4facfe' }
])

const handleCategoryClick = (category) => {
  router.push(category.path)
}

const handleReportClick = (report) => {
  if (report.path) {
    router.push(report.path)
  } else {
    ElMessage.info(`打开报表: ${report.name}`)
  }
}

const handleExport = (report) => {
  ElMessage.success(`导出报表: ${report.name}`)
}

const handleCustomReport = () => {
  ElMessage.info('打开自定义报表设计器')
}
</script>

<style scoped>
.reports-center {
  padding: 20px;
  background: #f5f5f5;
  min-height: 100vh;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.title {
  font-size: 20px;
  font-weight: bold;
}

.quick-stats {
  margin-bottom: 20px;
}

.stat-card {
  padding: 24px;
  border-radius: 12px;
  color: white;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.3s;
  cursor: pointer;
}

.stat-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.stat-card.sales {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.stat-card.orders {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
}

.stat-card.members {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.stat-card.inventory {
  background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.stat-icon {
  width: 70px;
  height: 70px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stat-content {
  flex: 1;
}

.stat-label {
  font-size: 14px;
  opacity: 0.9;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 5px;
}

.stat-value.warning {
  color: #fff;
}

.stat-trend {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
}

.stat-trend.up {
  color: rgba(255, 255, 255, 0.9);
}

.report-category-card {
  cursor: pointer;
  transition: all 0.3s;
  height: 100%;
}

.report-category-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.category-icon {
  width: 100px;
  height: 100px;
  margin: 0 auto 20px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}

.category-info {
  text-align: center;
}

.category-info h3 {
  margin: 0 0 10px 0;
  font-size: 18px;
  color: #303133;
}

.category-info p {
  margin: 0 0 15px 0;
  font-size: 14px;
  color: #909399;
}

.category-stats {
  display: flex;
  justify-content: center;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.report-item {
  padding: 20px;
  background: #f5f7fa;
  border-radius: 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
}

.report-item:hover {
  background: #ecf5ff;
  transform: scale(1.05);
}

.report-icon {
  margin-bottom: 15px;
}

.report-name {
  font-size: 15px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 8px;
}

.report-meta {
  font-size: 13px;
  color: #909399;
}

.recent-report-item {
  display: flex;
  align-items: center;
}
</style>
